import React, { useState } from 'react';
import { Select, Spin } from 'antd';
import { debounce } from 'lodash';
// import { getemployeelist } from '@/services/attendance/overtime';
import { searchEmployee } from '../service';

const { Option } = Select;

const Successor = ({ value, onChange, ...rest }) => {
    const [successorOptions, setSuccessorOptions] = useState([]);
    const [loading, setLoading] = useState(false);

    // 搜索员工姓名
    const handleSearch = debounce(async (name = '') => {
        const params = {
            name
        };
        setLoading(true);
        const { code, data } = await searchEmployee(params);
        if (code === 10000) {
            const arr = data.map(item => ({
                label: item.employeeName,
                key: item.employeeCode
            }));
            setSuccessorOptions([...arr]);
        }
        setLoading(false);
    }, 500);

    const handleChange = changeValue => {
        if (onChange) {
            onChange(changeValue);
        }
    };

    return (
        <div>
            <Select
                allowClear
                labelInValue
                showSearch
                filterOption={false}
                showArrow={false}
                defaultValue={value}
                notFoundContent={loading ? <Spin size="small" /> : null}
                onSearch={handleSearch}
                onChange={handleChange}
                loading={loading}
                getPopupContainer={triggerNode => triggerNode.parentElement}
                {...rest}
            >
                {successorOptions.map(item => (
                    <Option key={item.key}>{item.label}</Option>
                ))}
            </Select>
        </div>
    );
};

export default React.forwardRef(Successor);
